<template>
  <div class="producbox">
    <!-- 页面左侧树结构 -->
    <div class="leftbox">
      <el-input
      size="small"
      style="margin-bottom: 10px;"
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input>

      <el-tree
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        :highlight-current="true"
          @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        ref="tree">
        <template slot-scope="{ node, data }">
           <span :style="{cursor: data.type=='2' ? 'pointer' : 'no-drop', fontSize: '14px'}">{{ node.label }}</span>
        </template>
      </el-tree>
    </div>
    <div class="rightbox">
      <!-- 页面头部搜索栏 -->
      <div class="righttop">
        <div>
          <el-radio-group v-model="radio3" size="small">
            <el-radio-button label="2">月</el-radio-button>
            <el-radio-button label="3">年</el-radio-button>
          </el-radio-group>
          <span class="little">
            <el-date-picker v-if="radio3=='2'" v-model="value2" type="month" value-format="yyyy-MM" placeholder="选择月" size="small"></el-date-picker>
            <el-date-picker v-else v-model="value3" type="year" value-format="yyyy" placeholder="选择年" size="small"></el-date-picker>
          </span>
          <span>
            <el-radio-group v-model="radio">
              <el-radio label="1">单位产品能耗</el-radio>
              <el-radio label="2">万元产值能耗</el-radio>
            </el-radio-group>
          </span>
        </div>
        <div>
          <el-button size="small" @click="chongzhi">重 置</el-button>
          <el-button type="primary" size="small" @click="submit">查 询</el-button>
        </div>
      </div>
      <!-- 盒子主体 -->
      <div class="rightbody">
        <!-- 导出部分 -->
        <div class="top">
          <div>生产指标对标</div>
          <div class="butti">
            <TopTile @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
        </div>
        <!-- 图表盒子 -->
        <div class="echartbox" ref="echartbox"></div>
        <!-- 表格盒子 -->
        <div class="tablebox">
          <TableColumn ref="tabledata"
              :issize="issize"
              :tableData="tableData" 
              :tableConfig="tableConfig">
            </TableColumn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {gettreelistapi,getechartlistapi,gettablelistapi} from '@/api/energy-consumption/factory-energy/ProductionIndicators'
import * as echarts from 'echarts';
import TopTile from '@/components/TopTitle/index.vue'
import { exportexcel } from '@/utils/excel'
import TableColumn from '@/components/Table/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      radio:'1',
      radio3: '2',
      value2:'',
      value3: '',
      issize:'medium',
      filterText: '',
      tableData:[],
      tableConfig: [
        {label:'序号',type:'index',width:'80',center:'center'},
        {label:'产品名称',prop:'productName'},
        {label:'日期指标',prop:'produceDate',center:'center'},
        {label:'单位产品能耗(kWh/元)',prop:'unitEnergyValue',center:'right'},
        {label:'合理值(kWh/元)',prop:'reasonableValue',center:'right'},
        {label:'先进值(kWh/元)',prop:'advancedValue',center:'right'},
      ],
        data: [],
        defaultProps: {
          children: 'sonList',
          label: 'name'
        },
        treevalue:{}
    };
  },

  async mounted() {
    this.gettime()
    const {data:{entity:{sonList}}}=await gettreelistapi()
    this.data=sonList
  },

  methods: {
    // 查询
    async submit() {
      if(!this.treevalue.id) return this.$message.warning('请先选择')
      this.tableConfig.forEach(ele => {
        if (ele.prop == 'unitEnergyValue') {
          ele.label=this.radio=='1'?'单位产品能耗(kWh/元)':'万元产值能耗(kWh/元)'
        }
      })
      this.$refs.tabledata.loading=true
      const treeId=this.treevalue.id.substring(1)
      const {data:{list}}=await getechartlistapi({
        dateString:this.radio3=='2'?this.value2:this.value3,dateType:this.radio3,
        type:this.radio,treeId
      })
      const res=await gettablelistapi({
        dateString:this.radio3=='2'?this.value2:this.value3,dateType:this.radio3,
        type:this.radio,treeId
      })
      this.$refs.tabledata.loading=false
      this.tableData=res.data.list
      this.getecharts(list)
    },
    // 树节点点击
    handleNodeClick(val) {
      this.treevalue=val
      if(val.type=='2') this.submit()
     },
    // 重置
    chongzhi(){
      this.radio='1'
      this.radio3='2'
      this.gettime()
      this.submit()
    },
    // 树节点过滤
    filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
    },
     // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 列表刷新
    shuaxin() {
      this.submit()
      this.$message.success('列表刷新成功')
    },
    //导出
    daochu() {
      const treeId=this.treevalue.id.substring(1)
      exportexcel('ecm-microservice-biz/ecm/factory/energy/produce/quota/exportExcel', {
        dateString:this.radio3=='2'?this.value2:this.value3,dateType:this.radio3,
        type:this.radio,treeId
      },'生产指标对标')
    },
    //  获取图表
    getecharts(list) {
      var chartDom = this.$refs.echartbox
      var myChart = echarts.init(chartDom);
      const arr=['#f2bd42','#1890ff','#58a55c']
      const timePoints=list[0]?.datalist.map(ele=>ele.timeReading)
      const series= list.map((ele,index) => {
        return {
            name:ele.name,
            data: ele.datalist.map(ele=>ele.valueReading),
            type: 'bar',
            itemStyle: {
              color: arr[index],
             }
        }
      })
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: timePoints
        },
        legend:{},
        tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
          },
        yAxis: {
          type: 'value'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
          series: series
      };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month =mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.value3 = year.toString()
      this.value2 = year + '-' + month
    },
  },
  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
};
</script>

<style scoped>
.producbox{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    background-color: #fff;
    margin-right: 10px;
    padding: 20px;
  }
  .rightbox{
    width: calc(100% - 310px);
    .righttop{
      height: 80px;
      padding: 0 20px;
      line-height: 80px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .little{
        margin:0 20px 0 10px;
      }
    }
    .rightbody{
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .top{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .butti{
          display: flex;
          align-items: center;
        }
      }
      .echartbox ,.tablebox{
        height: 47.5%;
      }
    }
  }
}
</style>